//noinspection CssUnknownTarget
@font-face {
  src: url("/font/bender-bold.woff2") format("woff2"),
    url("/font/bender-bold.woff") format("woff");
  font-family: "Bender";
  font-display: swap;
}

//noinspection CssUnknownTarget
@font-face {
  src: url("/font/AsapCondensed-BoldItalic.woff2") format("woff2"),
    url("/font/AsapCondensed-BoldItalic.woff") format("woff");
  font-family: "Asap Condensed Bold Italic";
  font-display: swap;
}

//noinspection CssUnknownTarget
@font-face {
  src: url("/font/AsapCondensed-Medium.woff2") format("woff2"),
    url("/font/AsapCondensed-Medium.woff") format("woff");
  font-family: "Asap Condensed Medium";
  font-display: swap;
}

//noinspection CssUnknownTarget
@font-face {
  src: url("/font/fusion-pixel.woff2") format("woff2"),
    url("/font/fusion-pixel.woff") format("woff");
  font-family: "Fusion Pixel";
  font-display: swap;
}

//noinspection CssUnknownTarget
html {
  --color-pallete-arona-blue: #3f88f2;
  --color-pallete-warning: #ffa00c;
  --color-pallete-danger: #ff3a30;
  --color-eden-danger-1: 255, 240, 232;
  --color-eden-danger-6: 233, 88, 59;
  --color-eden-danger-7: 194, 58, 37;

  --color-card-background: #fff;

  --color-glass-panel-border: #eff3ff;
  --color-glass-panel-hover: #bcbfc451;
  --color-glass-panel: #f4f7ff42;

  --color-main-background: #edf4fb;
  --color-mobile-nav-background: #ffffffd8;
  --color-mobile-subnav-background: #ffffffb3;
  --color-momotalk-background: #f19eaa;
  --color-momotalk-banner-text: #fff;
  --color-momotalk-favor-schedule-background: #fceef2;
  --color-momotalk-user-action-border: lightgray;
  --color-momotalk-user-reply-background: #e5ebf1;
  --color-name-tag: #ffffffe0;
  --color-option-button: #fff;
  --color-option-button-hover: #dfdfdf;
  --color-player-avatar-border: #5c606e;
  --color-primary-button: #3f88f2;
  --color-student-filter-background: #d7d9e1b3;
  --color-switch-track: #fff;

  --color-tag-active-background: #2f2f2f;
  --color-tag-active: #ffffff;
  --color-tag-background: #ffffff;
  --color-tag-fluent: #115ea3;

  --color-text-contrast: #fff;
  --color-text-decoration: #ededed;
  --color-text-elastic-armor: #943aa6;
  --color-text-glass-panel: #808080;
  --color-text-heavy-armor: #b26d1f;
  --color-text-ingame: #344a6e;
  --color-text-light-armor: #a70c19;
  --color-text-main: #2f2f2f;
  --color-text-special: #006bff;
  --color-text-striker: #cc1a25;
  --color-text-unarmed: #216f9c;
  --color-text-fluent-white: #fff;

  --color-title-container: #fcfdfe;

  --color-shadow-near: hsl(210deg 55% 46% / 10%);
  --color-shadow-far: hsl(210deg 55% 46% / 17%);
  --color-shadow-farther: hsl(210deg 55% 66% / 20%);

  --style-switch-track-shadow: inset 0.2rem 0.2rem 0.35rem #d9d9d9,
    inset -0.15rem -0.15rem 0.3rem #fff;
  --style-switch-texture: linear-gradient(145deg, #c3f0ff, #a4cade);
  --style-switch-shadow: 0.1rem 0.1rem 0.4rem #8aa8ba;

  --style-shadow-shallow: 0.5rem 0.5rem 0.5rem rgba(0, 0, 0, 0.08);
  --style-shadow-near: 0.1rem 0.1rem 0.2rem var(--color-shadow-near);
  --style-shadow-far: 0.2rem 0.2rem 0.5rem var(--color-shadow-far);
  --style-shadow-farther: 0.2rem 0.2rem 1rem var(--color-shadow-farther);
  --style-primary-button-inset-shadow: inset 1px 1px 2px #3a6dc7cc,
    inset -1px -1px 2px #4f95ffcc;
  --style-primary-inset-main: inset 5px 5px 10px #c9cfd5,
    inset -5px -5px 10px #ffffff;

  --style-background-image: url("/image/homescreen/background.webp");

  --trigo-param-positive: calc((0.6rem - 1px) / 1.414);
  --trigo-param-negative: calc((0.6rem - 1px) / -1.414);

  color: var(--color-text-main);
}

//noinspection CssUnknownTarget
html[data-theme="dark"] {
  --color-pallete-arona-blue: #b2cffa;
  --color-pallete-warning: #cc820a;
  --color-pallete-danger: #cc2f27;
  --color-eden-danger-1: 77, 3, 0;
  --color-eden-danger-6: 237, 125, 96;
  --color-eden-danger-7: 242, 155, 129;

  --color-card-background: #2f2f2f;
  --color-glass-panel-border: #4b93dc;
  --color-main-background: #343e50;

  --color-mobile-nav-background: #343e50d8;
  --color-mobile-subnav-background: #343e50b3;

  --color-momotalk-background: #b77b84;
  --color-momotalk-banner-text: #333;
  --color-momotalk-favor-schedule-background: #593640;
  --color-momotalk-user-action-border: #333;
  --color-momotalk-user-reply-background: #39526a;

  --color-name-tag: #454545e0;
  --color-option-button: #333;
  --color-option-button-hover: #141414;
  --color-player-avatar-border: #eee;
  --color-primary-button: #4c7bb0;
  --color-student-filter-background: #2a2a2ab3;
  --color-switch-track: #333;

  --color-tag-active-background: #000;
  --color-tag-active: #eee;
  --color-tag-background: #494949;

  --color-text-decoration: #5c5c5c;
  --color-text-glass-panel: #eee;
  --color-text-ingame: #eee;
  --color-text-main: #eee;
  --color-title-container: #404040ed;
  --color-text-heavy-armor: #d98526;
  --color-text-light-armor: #cd0e1e;
  --color-text-striker: #f11f2c;
  --color-text-unarmed: #2989c0;

  --color-shadow-near: #2126311f;
  --color-shadow-far: #0c0e1219;
  --color-shadow-farther: #0c0e123b;
  --style-primary-button-inset-shadow: inset 1px 1px 2px #416996cc,
    inset -1px -1px 2px #578cc9cc;
  --style-primary-inset-main: inset 5px 5px 10px #2c3544,
    inset -5px -5px 10px #3c475c;

  --style-switch-track-shadow: inset 0.2rem 0.2rem 0.35rem #262626,
    inset -0.15rem -0.15rem 0.3rem #000;
  --style-switch-texture: linear-gradient(145deg, #b8b8b8, #616161);
  --style-switch-shadow: 0.1rem 0.1rem 0.4rem #616161;

  --style-background-image: url("/image/homescreen/background-dark.webp");
}

//noinspection CssOverwrittenProperties
body {
  display: flex;
  justify-content: center;
  align-items: stretch;
  transition: background 0.375s ease-in-out;
  box-sizing: border-box;
  background: var(--style-background-image) no-repeat center;
  background-size: cover;
  padding: 1rem;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  font-family: "Microsoft YaHei", "PingFang SC", -apple-system, system-ui,
    "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", BlinkMacSystemFont,
    "Helvetica Neue", "Hiragino Sans GB", Arial, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

a {
  transition: color 0.375s ease-in-out;
  color: var(--color-text-main);
}

#app {
  grid-column-gap: 1.5rem;
  display: grid;
  grid-template-columns: max-content auto;
  grid-template-areas: "navigation-pane main";
  flex: 1;
  justify-items: stretch;
  transition: border-color 0.375s ease-in-out;
  box-shadow: var(--style-shadow-shallow);
  border-width: 0.2rem;
  border-style: solid;
  border-color: var(--color-glass-panel-border);
  border-radius: 2.5rem;
  background-color: var(--color-glass-panel);
  padding: 1rem;
  max-width: 1920px;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.acrylic {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background-image: url("/src/assets/nnnoise.png");
  background-position: center;
  background-repeat: repeat;
  overflow: hidden;
}

.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fill-width {
  width: 100%;
}

.fill-screen {
  flex: 1;
}

.flex-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.rounded-small {
  border-radius: 0.5rem;
  -webkit-border-radius: 0.5rem;
}

.rounded-medium {
  border-radius: 1rem;
  -webkit-border-radius: 1rem;
}

.rounded-large {
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
}

.shadow-near {
  box-shadow: 0.1rem 0.1rem 0.2rem var(--color-shadow-near);
}

.shadow-far {
  box-shadow: 0.2rem 0.2rem 0.5rem var(--color-shadow-far);
}

.shadow-farther {
  box-shadow: 0.2rem 0.2rem 1rem var(--color-shadow-farther);
}

.color-transition {
  transition: color 0.375s ease-in-out;
}

.el-message--error {
  --el-message-border-color: rgb(var(--color-eden-danger-7)) !important;
  --el-message-bg-color: rgb(var(--color-eden-danger-1)) !important;
  --el-message-text-color: rgb(var(--color-eden-danger-6)) !important;
  box-shadow: 0 0 10px rgba(var(--color-eden-danger-7), 0.1);
}

.fluent-tag {
  border-radius: 4px;
  background-color: var(--color-tag-fluent);
  padding: 0 8px;
  color: var(--color-text-fluent-white);
}

.user-action-button {
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.375s ease-in-out;
  cursor: pointer;
  background: var(--color-primary-button);
  padding: 0.4rem 1rem;
  color: #fff;
  text-align: center;
  text-decoration: none;

  &.warning {
    background: var(--color-pallete-warning);
    color: #333;
  }

  &.danger {
    background: var(--color-pallete-danger);
  }

  &.outline {
    border: 1px solid var(--color-text-glass-panel);
    background: none;
    color: var(--color-text-main);
  }
}

// consistent scrollbar style on all desktop browsers
@media screen {
  html[data-scrollbar="customize"] {
    //scrollbar-gutter: stable;
    //scrollbar-width: thin;

    ::-webkit-scrollbar {
      border-radius: 1rem;
      background: transparent;
      width: 0.65rem;
    }

    ::-webkit-scrollbar-thumb {
      border: 2px solid transparent;
      border-radius: 0.65rem;
      background: #777a7d;
      background-clip: content-box;

      &:hover {
        background: #555;
      }
    }

    ::-webkit-scrollbar-track {
      background-color: transparent;
    }
  }
}

@media screen and (max-width: 768px) {
  body {
    padding: 0;
  }

  #app {
    display: flex;
    flex: 1;
    flex-direction: column;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: var(--style-shadow-shallow);
    border-width: 0;
    border-style: none;
    border-color: var(--color-glass-panel-border);
    border-radius: 0;
    background-color: var(--color-glass-panel);
    padding: 0;
  }
}
